<template>
  <lay-layer v-model="visible" :shade="true" :shadeClose="false" shadeOpacity="0.2" :area="['500px', '500px']" :success="init" :btn="action">
    <div style="padding: 20px">
      <lay-form :model="editUserBo" ref="formRef">
        <lay-form-item label="帐号" prop="username" required>
          <lay-input v-model="editUserBo.username" :disabled="true"></lay-input>
        </lay-form-item>
        <lay-form-item label="昵称" prop="nickName" required>
          <lay-input v-model="editUserBo.nickName"></lay-input>
        </lay-form-item>
        <lay-form-item label="角色" prop="roleCodeList" required>
          <lay-select v-model="editUserBo.roleCodeList" :options="roleSimpleList" :multiple="true" style="width: 100%">
          </lay-select>
        </lay-form-item>
        <lay-form-item label="描述" prop="note">
          <lay-textarea v-model="editUserBo.note" placeholder="请输入描述" allow-clear></lay-textarea>
        </lay-form-item>
      </lay-form>
    </div>
  </lay-layer>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {listRoleSimple} from '@/api/module/role'
import {simpleInfoUser,editUser} from "@/api/module/user";
import useFxwForm from "@/hooks/useFxwForm";
import {useUserStore} from "@/store/user";
import {buildRoleOptions} from '@/library/objectUtil'

const userStore = useUserStore()
const {changeVisible,visible} = useFxwForm()

const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
});
const formRef = ref();

const emit = defineEmits(['refreshParent'])
const roleSimpleList = ref<Array<{label: string,value:string}>>([])
const editUserBo = ref({
  id: 0,
  username: '',
  nickName: '',
  password: '',
  roleCodeList:[],
  note:''
})

// 页面初始化
const init = ()=> {
  roleSimpleList.value = []
  listRoleSimple().then(res=>{
    if (res.data) {
        roleSimpleList.value = buildRoleOptions(res.data)
    }
    return simpleInfoUser(props.id);
  }).then(res => {
    editUserBo.value = res.data;
  })
}

const action = ref([
  {
    text: "确认",
    callback: () => {
      editUser(editUserBo.value).then(res=>{
        if (res.code === 200) {
          emit('refreshParent')
          changeVisible();
          if (editUserBo.value.id === userStore.userInfo.userId){
            userStore.loadUserInfo();
          }
        }
      })
    }
  },
  {
    text: "取消",
    callback: () => {
      changeVisible();
    }
  }
])

defineExpose({
  changeVisible
})

</script>

<style scoped>


</style>